<template>
  <div class="home-page">
      <div id="homePage">
        <span>
          <div class="logo"><img border="0" @click="home" src="https://www.ketangpai.com/images/common/logo_blue.png" width="128" height="32" align="top"/></div>
          <div  class="one" @click="home">首页</div> 
          <a href="" target="_self" class="one">产品功能</a>
          <a href="" target="_self" class="one">解决方案</a>
          <a href="" target="_self" class="one">机构版</a>
          <a href="" target="_self"  class="one">渠道合作</a>
          <a href="" target="_self"  class="one">会员权益</a>
          <a href="" target="_self" class="one">帮助中心</a>
          <a href="" target="_self" class="one">Ai工具集</a>
          <button @click="login" target="_self" class="two">登录</button>
          <button @click="create" target="_self" class="three">注册</button>
        </span>
      </div>
      <div class="img" >
        <div class="one-in-title">课堂派教学服务平台一体机</div>
        <div class="one-in-functions">基于信创架构的互动教学平台，赋能智慧教室、实验实训等各种场景</div>
        <div class="one-in-tags">
          <div class="one-in-tag">全国产架构设计</div>
          <div class="one-in-tag">自主可控</div>
          <div class="one-in-tag">数据更安全</div>
          <div class="one-in-tag">开箱即用</div>
          <div class="one-in-tag">一体化平台</div>
        </div>
        <div style="margin-top: 36px;margin-left: 175px;">
          <ul style="display: flex;flex-wrap: wrap;width: 400px;list-style-type: none;">
            <li class="newPart">
              多屏互动
            </li>
            <li class="newPart">
              自研教学平台
            </li>
            <li class="newPart">
              直、录播会议功能
            </li>
            <li class="newPart">
              对接智慧黑板等

            </li>
          </ul>
        </div>
        <div style="margin-left: 200px;margin-top: 20px;">
          <button class="el-button-home">
            <span>详细了解</span>
          </button>
          <button class="el-button-right">
            <span>联系我们</span>
          </button>
        </div>
      </div>
      <div class="mokuai10">
        <div class="title0">混合教学全过程管理</div>
        <div class="text0">课前、课中、课后、线上线下、教学场景全过程管理</div>
        <div class="list">
          <ul class="ul0" >
            <li class="li0">
              <div class="tupian0">
                 <img src="https://www.ketangpai.com/img/task.a6436aca.png" width="64px" height="64px" >
              </div>
              <br/>
              <div class="title">作业</div>
              <div class="text" >81 种文档格式作业在线展示和批阅，实时查重，精准对比，避免学生抄袭。自动管理成绩，一键下载作业数据。</div>
            </li>
            <li class="li0">
              <div class="tupian0" ><img src="" width="64px" height="64px"></div>
              <br/>
              <div class="title">考试/练习</div>
              <div class="text">单选、多选、填空、简答等10余种题型。支持题库随机抽题组卷。支持限时考试、选项随机等防作弊模式。</div>
            </li>
            <li class="li0">
              <div class="tupian0"><img src="" width="64px" height="64px"></div>
              <br/>
              <div class="title" >课件资料</div>
              <div class="text" >课件、资料、话题、公告等教学内容支撑。在线制作方便快捷，提升备课效率。支持课前发布活动，课中互动，课后巩固。</div>
            </li>
            <li class="li0">
              <div class="tupian0" ><img src="" width="64px" height="64px"></div>
              <br/>
              <div class="title" >课中互动</div>
              <div class="text" >课件在线讲解、标记疑问 支持发言、开启弹幕、抢答、提问、话题讨论、黑板、画笔标注课堂要点，让课堂更精彩 </div>
            </li>
            <li class="li0">
              <div class="tupian0" ><img src="" width="64px" height="64px"></div>
              <br/>
              <div class="title" >考勤签到</div>
              <div class="text" >二维码、数字口令、GPS等5种考勤形式， 精准有效、避免代签 签到数据自动生成，一键导出</div>
            </li>
            <li class="li0">
            <div class="tupian0" ><img src="" width="64px" height="64px"></div>
            <br/>
            <div class="title" >成绩管理</div>
            <div class="text" >汇总互动数据、平时成绩、期末成绩个性化配置成绩权重占比数据报表一键导出下载，课留存，可追溯</div>
            </li>
            <li class="li0">
              <div class="tupian0" ><img src="" width="64px" height="64px"></div>
              <br/>
              <div class="title">教学数据分析</div>
              <div class="text" >全方位教学数据信息化，可视化实时监测教学质量，把控教学进度，学业预警分析，提升教学效果</div>
            </li>
            <li class="li0">
              <div class="tupian0" ><img src="" width="64px" height="64px"></div>
              <br/>
              <div class="title" >直播-云录屏</div>
              <div class="text" >满足线上线下混合式教学场景 动画及课件同屏+语音实现轻量级直播 不限人员数量，手机电脑均可参与</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="mokuai0">
        <div class="title0">智慧教学平台</div>
      </div>
      <div class="list2">
        <ul class="ul1">
          <li class="li1">
            <div class="tupian1">
              <img src="" width="64px" height="64px" >
            </div>
            <br/>
            <div class="title1">线下互动课堂</div>
            <div class="text1" >多种互动教学工具，沉浸式学习体验，精准化学习。</div>
          </li>
          <li class="li1">
            <div class="tupian1" ><img src=""></div>
            <br/>
            <div class="title2">混合教学全过程管理</div>
            <div class="text1">课前课中课后全过程教学管理，教学数据可视化，可留存，提升教学质量。</div>
          </li>
          <li class="li1">
            <div class="tupian1"><img src="" width="64px" height="64px"></div>
            <br/>
            <div class="title1" >在线直播教室</div>
            <div class="text1" >在线直播教学搭配教学互动，充分还原真实的教学场景，提升教学效果。</div>
          </li>
          <li class="li1">
              <div class="tupian1"><img src=""></div>
              <br/>
              <div class="title1" >在线课程建设</div>
              <div class="text1" >在线直播课、精品慕课资源、课程资源体系搭建，沉淀教学资源。</div>
          </li>
        </ul>
        <div class="anniu">
          <div class="anniu0"><a href="产品功能.html" target="_self" class="four">了解详细功能</a></div>
          <div class="anniu1"><a href="注册.html" target="_self" class="five">立即注册体验</a></div>
        </div>
      </div>
      <div class="yanse">
        <div class="title0"><p>课堂派机构版</p></div>
        <div class="bankuai3">
          <div class="tupian2">
            <img src="https://www.ketangpai.com/img/mecShow.7f324bbf.png" width="625px" height="548px">
          </div>
          <div class="liebiao">
            <ul style="list-style-type: none;">
              <li>
                <div class="title3">
                  <img src="" width="20px" height="20px" style="float: left;" align="bottom">
                  <div class="text2">精准高效管理教学事务</div>
                </div>
                <div class="wenzi">
                    <div class="text3">一键对接教务系统，精准高效管理师生教学、课程、课务。</div>
                </div>
              </li>
              <li>
                <div class="title3">
                  <div class="tupian3"><img src="" width="20px" height="20px" style="float: left;" align="bottom"></div>
                  <div class="text2">有效提升教学质量</div>
                </div>
                <div class="wenzi">
                  <div class="text3">以课堂教学为核心，以产出为导向；实时监控师生、课程、教学活动</div>
                  <div class="text9">等教学过程。</div>
                  <div class="text3"></div>
                </div>
              </li>
              <li>
                <div class="title3">
                  <div class="tupian3">
                    <img src="" width="20px" height="20px" style="float: left;" align="bottom">
                  </div>
                  <div class="text2">教学资产管理</div>
                </div>
                <div class="wenzi">
                  <div class="text3">沉淀教学过程资产，促进优质课程、资源、知识图谱建设。</div>
                </div>
              </li>
              <li>
                <div class="title3">
                  <div class="tupian3">
                    <img src="" width="20px" height="20px" style="float: left;" align="bottom">
                  </div>
                  <div class="text2">智慧校园全景定制</div>
                </div>
                <div class="wenzi">
                  <div class="text3">以学生为中心，以教学为导向，提供校园全景智慧教学解决方案。</div>
                  <div class="text3"></div>
                </div>
              </li>
              <li>
                <div class="title4">
                  <div class="anniu2"><a href="产品功能.html" target="_self" class="six">了解详细功能</a></div>
                  <div class="anniu3"><a href="注册.html" target="_self" class="seven">申请免费使用</a></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="welcome">
        <div class="bankuai4">
          <div class="text4">欢迎使用课堂派</div>
          <div class="text5">精彩教学，从这里开始</div>
          <div class="anniu4">
            <div class="anniu5"><a href="产品功能.html" target="_self" class="eight">联系课堂派</a></div>
            <div class="anniu6"><a href="注册.html" target="_self" class="nine">免费注册</a></div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="top">
          <div class="left">
            <div class="tupian4">
              <img src="">
              <ul style="list-style-type: none; display: flex;">
                <li class="text6">
                  <a href="关于我们.html" class="ten">关于我们</a>
                </li>
                <li class="text6">
                  <a href="服务条款.html" class="ten">服务条款</a>
                </li>
                <li class="text6">
                  <a href="产品动态.html" class="ten">产品动态</a>
                </li>
                <li class="text6">
                  <a href="浏览器下载.html" class="ten">浏览器下载</a>
                </li>
              </ul>
            </div>
            
          </div>
          <div class="right">
            <div class="ma">
              <p class="p">联系我们</p>
              <p class="p1">(工作日09:30 ~ 18:30)</p>
              <p class="p">
                <img src="" width="20px" height="20px">
                "010-57748642"
              </p>
              <p class="p">
                <img src="" width="20px" height="20px">
                  "hi@ketangpai.com"
                </p>
            </div>
            <div class="text7">
              <p class="p" ><img src="https://www.ketangpai.com/img/paipaikefu.bf408c12.png" width="120px" height="120px"></p>
              <p class="p">课堂派客服-派派</p>
            </div>
            <div class="text7">
              <p class="p"><img src="https://www.ketangpai.com/img/portalQRcode.24a37b5d.png" width="120px" height="120px"></p>
              <p class="p">扫码开启移动教学</p>
            </div>
          </div>
        </div>
      </div>
      <div class="last">
        <div class="left1">
          <span class="text8">
            "Copyright © 2014 ketangpai.com All Rights Reserved.
            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/recordQuery" class="text8">京ICP备14023276号-4</a>
          </span>
        </div>
        <div class="right2">
          <a target="_blank" href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402010566" class="text8">京公网安备 11011402010566号</a>
        </div>
      </div>
  </div>
</template>

<script>
import router from '../router';
export default {
  name: 'HomePage',
  data() {
    return {
      message: 'Welcome to the login page'
    };
  },
  methods: {
    login() {
      router.push('/login')
    },
    create() {
      router.push('/register')
    },
    home() {
      router.push('/').catch(err => {
      if (err.name !== 'NavigationDuplicated') {
        throw err;
      }
    });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >


.one-in-title{
  font-size: 43px;
    font-weight: 700;
    text-align: left;
    color: #010001;
    line-height: 81px;
    letter-spacing: 4.3px;
    padding-top: 80px;
    margin-left: 200px;
}
.one-in-functions{
  font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #333841;
    margin-left: 200px;
    margin-top: 10px;

}
.one-in-tags{
  font-size: 18px;
    font-weight: 500;
    text-align: left;
    color: #333841;
    margin-top: 21px;
    margin-left: 200px;
    display: flex;
}
.one-in-tag{
  margin-right: 15px;
  font: inherit;
    font-weight: 400;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.newPart{
  width: 200px;
    margin-bottom: 10px;
    list-style-type: disc;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    color: #000;
}
.el-button-home{
  padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #4285f4;
    border-color: #4285f4;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
}
.el-button-home:hover{
  background: #689df6;
    border-color: #689df6;
    color: #fff;
}
.el-button-right{
  margin-left: 26px;
    border-radius: 4px;
    background-color: white;
    color: #4285f4;
    width: 110px;
    border: 1px solid #4285f4;
    padding-left: 10px;
    padding-right: 10px;
    padding: 7px 10px;
    font-size: 14px;
}
  #homePage{
    height: 50px;
    margin-bottom: 30px;
  }
  .two{
    color: dodgerblue;
    border-color: dodgerblue;
    border-style: solid;
    border-width: 1px;
    font-size: 15px;
    padding: 5px 30px;
    margin-left: 120px;
    border-radius: 5px;
    text-decoration: none;
    background-color: white;
  }
  .three{
    background: linear-gradient(131deg,#7eb0ff,#2178ff);
  color: #fff;
    border:1px solid;
    font-size: 15px;
    padding: 5px 30px;
    margin-left: 10px;
    border-radius: 5px;
    text-decoration: none;
  }
  .one{
    padding: 20px 15px;
      text-align: center;
      display: inline-block;
      font-size: 18px;
    background-color: white;
    text-decoration: none;
    color: #000;
  }
  .logo{
    padding: 15px;
    margin-left: 60px;
    margin-right: 10px;
    background-color: white;
    float: left;
  }
.home-page{
  width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.img{
  background-image: url(	https://www.ketangpai.cn/img/banner.37e37d97.png);
  height: 470px;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.mokuai10{
  
  text-align: center;
    padding: 64px 0 40px;
}
.list{
  background: linear-gradient(180deg,#fff,#f4f8ff 42%);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(244, 248, 255) 42%);
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}
.mokuai0{
  text-align: center;
    padding: 64px 0 40px;
}
.title0{
  font-size: 40px;
    font-weight: 500;
    color: #1f2023;
    text-align: center;
}
.text0{
  height: 32px;
    font-size: 20px;
    color: #74787c;
    margin-top: 16px;
}
.ul0{
  display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: linear-gradient(181deg,#fff,#f4f8ff 130%);
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    font-size: 100%;
    font: inherit;
    font-weight: 400;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    list-style-type: none;
}
.li0{
  height: 320px;
    text-align: center;
    width: 270px;
    list-style-type: none;
    border-radius: 8px 8px 0 8px;
    margin-top: 24px;
    padding: 40px 24px;
    background: linear-gradient(181deg,#fff,#f4f8ff 130%);
    background-image: linear-gradient(181deg, rgb(255, 255, 255), rgb(244, 248, 255) 130%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    list-style: none;
}
.tupian0{
  width: 64px;
    margin: 0 auto;
    height: 64px;
    margin-bottom: 14px;
}
.title{
  font-weight: 600;
    color: #1f2023;
    font-size: 24px;
    margin-bottom: 8px;

}
.text{
  font-size: 14px;
    color: #74787c;
    line-height: 24px;
    width: 240px;
    height: 72px;
    margin-left: 20px;
}
.ul1{
  display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
margin-right: 80px;
    padding: 0;
    border: 0;
    outline: none;
    font-size: 100%;
    font: inherit;
    font-weight: 400;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box;
    margin-left: 50px;
    list-style-type: none;
}
.li1{
  
    -webkit-tap-highlight-color: rgba(0,0,0,0);
margin-left: 20px;
   
    width: 270px;
    height: 262px;
    padding: 0 20px;
 
    border-radius: 4px;
    box-shadow: 20px 20px 100px -63px #8297b2;
}
.tupian1{
  width: 64px;
margin: 0 auto;
  height: 64px;
  margin-top: 20px;
  margin-bottom: 14px;
}
.title1{
  vertical-align: middle;
  font-weight: 600;
    color: #1f2023;
    font-size: 24px;
    margin-bottom: 8px;
    margin-left: 60px;
}
.text1{
  font-size: 14px;
    color: #74787c;
    line-height: 24px;
    width: 228px;
    height: 72px;
    margin-left: 20px;
    text-align: center;
}
.title2{
  vertical-align: middle;
  font-weight: 600;
    color: #1f2023;
    font-size: 24px;
    margin-bottom: 8px;
    margin-left:20px;
}
.anniu{
  margin: 64px auto;
  width: 344px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.four{
  color: dodgerblue;
  border-color: dodgerblue;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  padding: 12px 30px;
  border-radius: 5px;
  margin-left: 20px;
  text-decoration: none;
  display: inline-block;
  margin-right: 10px;
}
.five{
  background: linear-gradient(131deg,#7eb0ff,#2178ff);
  color: #fff;
  border:1px solid;
  font-size: 15px;
 padding: 12px 30px;
  border-radius: 5px;
  text-decoration: none;
  float: left;
}
.tupian2{
  float: left;
  margin-right: 80px;
}
.yanse{
  background: linear-gradient(180deg,#fff,#f4f8ff 42%);
    background-image: linear-gradient(rgb(255, 255, 255), rgb(244, 248, 255) 42%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
}
.bankaui3{
  margin-top: 30px;
  margin-bottom: 60px;
}
.title3{
  float: left;
    display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 140px;
}
.liebiap{
  display: inline-block;
}
.text2{
  color: #1f2023;
  font-weight: 600;
  font-size: 24px; 
  margin-left: 16px;
}
.text3{
  font-size: 18px;
  margin-top: 10px;
  color: #74787c;
  padding-left: 38px;
  line-height: 32px;
  float: left;
  margin-bottom: 10px;
}
.title4{
  display: flex;
  margin-top: 70px;
  padding-left: 0px;
  float: left;
  margin-bottom: 60px;
}
.six{
  color: dodgerblue;
  border-color: dodgerblue;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  padding: 12px 30px;
  margin-left: 40px;
  border-radius: 5px;
  text-decoration: none;
  float:left;
  margin-right: 10px;
}
.seven{
  background: linear-gradient(131deg,#7eb0ff,#2178ff);
  color: #fff;
  border:1px solid;
  font-size: 15px;
 padding: 12px 30px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
}
.anniu3{
  margin-left: 30px;
}
.welcome{
  background-image: url(https://www.ketangpai.com/img/welcome-bg.1865e6b9.jpg);
  background-position: 50%;
  height: 400px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.text4{

    font-weight: 500;
    line-height: 48px;
    font-size: 48px;
    margin-top: 88px;
    color: white;
}
.text5{
  font-size: 20px;
  margin-top: 24px;
  margin-bottom: 37px;
  margin-left: 70px;
  color: white;
}
.anniu4{
  margin-top: 10px;
  float: left;
  margin-left: 15px;
}
.anniu5{
  margin-top: 10px;
  float: left;
  margin-left: 15px;
}
.anniu6{
  margin-left: 30px;
  margin-top: 10px;
  float: left;
}
.eight{
  color:white;
  border-color:white;
  background-color: dodgerblue;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
}
.nine{
  color:dodgerblue;
  border-color:white;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  padding: 12px 30px;
  border-radius: 5px;
  text-decoration: none;
}
.top{
  width: 100%;
  height: 276px;
  background: #272e38;
   display: flex;
}
.left{
  width: 50%;
  float: left;
  display: flex;
  padding: 65px 0;
}
.tupian4
{
  border: 0;
  outline: none;
  font-size: 100%;
  font: inherit;
  font-weight: 400;
  margin-bottom: 20px;
  margin-left: 150px;
}
.text6{
  margin-top: 20px;
}
.text7{
  margin-left: 20px;
  display: inline-block;
  margin-top: 30px;
}
.ten{
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  margin-right: 64px;
}
.p{
  font-size: 14px;
  color: white;
}
.p1{
  font-size: 10px;
  color:#6d7790 ;
  margin-top: 2px;
}
.ma{
  margin-left: 120px;
  margin-top: 40px;
  float: left;
}
.last{
  width: 100%;
  height: 48px;
  background: #15191f;
  text-align: center;
}
.text8{ 
  font-size: 12px;
  color: #647184;
  text-decoration: none;
}
.left1{
  background-color:#15191f;
  width: 35%;
  padding-top: 10px;
  margin-left:270px;
  float: left;
}
.right2{
  float: left;
  padding-top: 10px;
  margin-left: 10px;
  background-color: #15191f;
  width: 20%;
}
.text9{
  font-size: 18px;
  margin-top: 10px;
  color: #74787c;
  padding-left: 38px;
  line-height: 32px;
  float: left;
  margin-bottom: 10px;
  margin-right: 300px;
}
</style>
